<template>
  <div class="mainPlay">
    <canvas id="wrapTow" height="400" width="1100"></canvas>
    <div class="mainPlay-box">
      <div class="mainPlay-img" :class="[isClickPlay ? 'VinylDisc' : '']">
        <canvas id="wrap" height="400" width="400"></canvas>
        <img
          class="auto-img"
          :src="
            oneMusicPlayData[0] == undefined
              ? ''
              : oneMusicPlayData[0].al.picUrl
          "
          alt=""
        />
      </div>
      <!--  -->
      <div
        class="mainPlay-play"
        :class="[isClickPlay ? 'VinylDisc' : '']"
      ></div>
      <!-- 唱针 -->
      <div class="mainPlay-needle" :class="[isClickPlay ? 'needlePlay' : '']">
        <img
          class="auto-img"
          src="../../assets/image/icon/changzhen.png"
          alt=""
        />
      </div>
    </div>
    <div class="mainPlay-con">
      <div class="main-con-box">
        <div class="lyricMusic">
          <div class="lyricMusic-p" :style="lyricMove">
            <p>{{ newtext }}{{ scorll() }}</p>
          </div>
        </div>
        <div class="musicName">
          <div class="musicName-img fl">
            <img
              class="auto-img"
              src="../../assets/image/icon/geshou.png"
              alt=""
            />
          </div>
          <div class="musicName-name">
            <span class="singer">{{
              oneMusicPlayData[0] == undefined
                ? ""
                : oneMusicPlayData[0].ar[0].name
            }}</span>
            <span class="singer-k">{{
              oneMusicPlayData[0] == undefined
                ? ""
                : oneMusicPlayData[0].l.br | changeScore
            }}</span>
          </div>
          <div class="musicAlbum">
            {{
              oneMusicPlayData[0] == undefined
                ? ""
                : oneMusicPlayData[0].al.name
            }}
          </div>
        </div>
        <div class="main-con-con">
          <div class="main-conGeci-img" @click="ShowLyricPage">
            <el-tooltip
              class="item"
              effect="dark"
              content="显示歌词"
              placement="top"
            >
              <img
                class="auto-img"
                src="../../assets/image/icon/geci.png"
                alt=""
              />
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainPlay",
  data() {
    return {
      // 高亮歌词行内样式设置
      lyricMove: "",
      text: "",
      newtext: "",

      // 黑碟的旋转
      isSpin:false,
    };
  },

  computed: {
    isClickPlay() {
      return this.$store.state.musicState.isClickPlay;
    },
    //   单首歌曲列表详情
    oneMusicPlayData() {
      return this.$store.state.musicState.oneMusicPlayData;
    },
    //歌词数据
    lyricData() {
      return this.$store.state.musicState.lyricData;
    },
    // 获取播放当前时间
    currentTime() {
      //console.log("获取播放当前时间",this.$store.state.musicState.currentTime);
      return this.$store.state.musicState.currentTime;
    },
    audioSrc() {
      //console.log("获取audioURL",this.$store.state.musicState.audioSrc);
      return this.$store.state.musicState.audioSrc;
    },
    // 获取audio标签
    getAudioElement() {
      //console.log("获取audio标签",this.$store.state.musicState.audioElement);
      return this.$store.state.musicState.audioElement;
    },
  },
 
  methods: {
    ShowLyricPage() {
      this.$router.push({ name: "Lyric" });
    },
    // 歌词滚动
    scorll() {
      this.lyricData.map((item, index) => {
        if (
          this.currentTime >= this.lyricData[index].time &&
          this.currentTime < this.lyricData[index + 1].time
        ) {
          this.text = this.lyricData[index].text;
        }
      });
    },
    // 歌频谱
    spectrum() {
      let wrap = document.getElementById("wrap");
      let wrapTow = document.getElementById("wrapTow");
      let cxt = wrap.getContext("2d");
      let cxt2 = wrapTow.getContext("2d");
      //获取API
      // let AudioContext = AudioContext // || webkitAudioContext;
      let context = new AudioContext();
      //加载媒体
      let audio = this.getAudioElement;
      // console.log("歌频谱", audio);
      // console.log("歌频谱2", this.getAudioElement);
      //创建节点
      audio.crossOrigin = "anonymous"; //解決CORS跨域限制
      // autoplay-policy='no-user-gesture-required reverts'
      let source = context.createMediaElementSource(audio);

      var analyser = context.createAnalyser();
      //连接：source → analyser → destination
      source.connect(analyser);
      analyser.connect(context.destination);
      //创建数据
      let output = new Uint8Array(180);
      var step = Math.round(output.length / 60); //采样步长
      let du = 2; //角度
      let potInt = {
        x: 200,
        y: 200,
      }; //起始坐标
      let R = 166; //半径
      let W = 4; //宽
      var potInt2 = {
        x: 100,
        y: 500,
      }; //起始坐标
      var H2 = 400; //高度
      var W2 = 4; //宽
      let fillColor = "linear-gradient(red 10% , rgba(185,200,56,.6) 50% )";
      (function drawSpectrum() {
        analyser.getByteFrequencyData(output); //获取频域数据
        cxt.clearRect(0, 0, wrap.width, wrap.height);
        //画线条
        for (let i = 0; i < 180; i++) {
          let value = output[i] / 10; //<===获取数据  設置頻譜條的高度
          cxt.beginPath();
          cxt.lineWidth = W;
          // 漸變色節點
          // createRadialGradient(x,y,r,x1,y1,r1)
          let linearGradient = cxt.createLinearGradient(50, 50, 50, 500);
          linearGradient.addColorStop(0.1, "rgba(206, 180, 230,1)");
          linearGradient.addColorStop(0.2, "rgba(153, 130, 243,1)");
          linearGradient.addColorStop(0.4, "rgba(139, 122, 255,1)");
          linearGradient.addColorStop(0.5, "rgba(213, 159, 255,1)");
          linearGradient.addColorStop(0.7, "rgba(185, 184, 235,0.8)");
          linearGradient.addColorStop(0.85, "rgba(231, 197, 213,1)");
          linearGradient.addColorStop(0.99, "rgba(107, 213, 255,.7)");

          cxt.strokeStyle = linearGradient;
          cxt.moveTo(
            Math.sin(((i * du) / 180) * Math.PI) * R + potInt.y,
            -Math.cos(((i * du) / 180) * Math.PI) * R + potInt.x
          ); //从圆边开始
          let Rv = R + value;
          cxt.lineTo(
            Math.sin(((i * du) / 180) * Math.PI) * Rv + potInt.y,
            -Math.cos(((i * du) / 180) * Math.PI) * Rv + potInt.x
          );
          cxt.stroke();
        }
        cxt.fill();
        //画一个空心小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(200, 200, 166, 0, 2 * Math.PI, false);
        cxt.stroke();
        cxt.closePath();
        //请求下一帧
        requestAnimationFrame(drawSpectrum);
      })();

      // 竖直频谱效果
      (function drawSpectrum2() {
        analyser.getByteFrequencyData(output); //获取频域数据

        cxt2.clearRect(0, 0, wrapTow.width, wrapTow.height);
        //画线条
        for (var p = 0; p < 60; p++) {
          var energy = (output[step * p] / 256.0) * 120;
          for (var t = 0; t < energy; t++) {
            // cxt2.beginPath();
            // cxt2.moveTo(16 * p + 3 + 10, H2 + W2 * t + 10);
            // cxt2.lineTo(16 * (p + 1) - 3, H2 + W2 * t);
            // cxt2.stroke();
            cxt2.beginPath();
            cxt2.moveTo(16 * p + 3, H2 - W2 * t);
            cxt2.lineTo(16 * (p + 1) - 3, H2 - W2 * t);
            cxt2.stroke();
          }
          var linearGradient = cxt2.createLinearGradient(50, 50, 50, 420);
          linearGradient.addColorStop(0.1, "rgba(206, 180, 230,1)");
          linearGradient.addColorStop(0.3, "rgba(153, 130, 243,1)");
          linearGradient.addColorStop(0.4, "rgba(139, 122, 255,1)");
          linearGradient.addColorStop(0.5, "rgba(213, 159, 255,1)");
          linearGradient.addColorStop(0.7, "rgba(185, 184, 235,0.8)");
          linearGradient.addColorStop(0.85, "rgba(231, 197, 213,1)");
          linearGradient.addColorStop(0.99, "rgba(107, 213, 255,.7)");

          cxt2.strokeStyle = linearGradient;
          // if (this.isClickPlay) {
          //   cxt2.beginPath();
          //   cxt2.moveTo(16 * p + 3, H2);
          //   cxt2.lineTo(16 * (p + 1) - 3, H2);
          //   cxt2.stroke();
          // }
        }
        cxt2.fill();
        //请求下一帧
        requestAnimationFrame(drawSpectrum2);
      })();
    },
  },
  watch: {
    text: function(newVal, oldVal) {
      if (newVal != oldVal) {
        this.newtext = newVal;
      }
    },
    audioSrc(newVal) {
      this.spectrum();
    },
  },

  // 局部过滤器
  filters: {
    changeScore(n) {
      return parseInt(n / 1000) + "k";
    },
  },
};
</script>

<style lang="scss" scoped>
.mainPlay {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: pink;
  .mainPlay-box {
    width: 100%;
    height: 600px;
    // background-color: red;
    position: relative;
    top: 0px;
    // margin-top: 50px;
  }
  .mainPlay-img {
    width: 310px;
    height: 310px;
    border-radius: 50%;
    // overflow:hidden;
    // background-color: orange;

    position: absolute;
    top: 172px;
    left: calc(50% - 150px);
    z-index: 20;
  }
  #wrap {
    position: absolute;
    top: -138px;
    left: -138px;
    z-index: 40;
  }
  #wrapTow {
    position: absolute;
    bottom: 300px;
    left: 0;
    z-index: -1;
  }

  .mainPlay-play {
    position: absolute;
    top: 100px;
    left: calc(50% - 223px);
    display: inline-block;
    width: 448px;
    height: 448px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    // background-color: blue;
    background-image: url(../../assets/image/icon/coverall.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 30;
  }
  .mainPlay-needle {
    width: 180px;
    height: 280px;
    position: absolute;
    top: -16px;
    left: 52%;
    transition: all 1s linear 0;
    transform-origin: top left;
    transform: rotateZ(-20deg);

    > img {
      z-index: 90;
    }
  }
  //   唱针动画
  .needlePlay {
    transition: all 1s linear 0;
    transform-origin: top left;
    transform: rotateZ(0deg);
    z-index: 90;
  }
  //   黑胶盘动画
  .VinylDisc {
    animation: minbox linear 10s infinite;
  }
  @-webkit-keyframes minbox {
    0% {
      transform: rotateZ(0deg);
      transform-origin: center center;
    }
    100% {
      transform: rotateZ(360deg);
      transform-origin: center center;
    }
  }

  .mainPlay-con {
    width: 100%;

    .main-con-box {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 200px;
    }
  }
  .lyricMusic {
    // height: 50px;
    // background-color: #fff;
   

    p {
       overflow: hidden;
      color: #d6d6d4;
      text-align: center;
      margin: 0;
      padding: 0;
      font-size: 24px;
      font-weight: bold;
    }
  }

  .musicName {
    margin-top: 30px;
    text-align: left;
    color: #d6d6d4;

    .musicName-img {
      width: 40px;
      height: 40px;
      // background-color: pink;
    }
    .singer {
      margin-left: 60px;
      font-size: 26px;
      font-weight: bold;
    }
    .singer-k {
      margin-left: 20px;
      border: 1px solid #333;
    }
    .musicAlbum {
      margin-top: 10px;
      font-size: 24px;
      font-weight: bold;
      margin-left: 100px;
    }
  }
  .main-con-con {
    width: 100%;
    margin-top: 20px;
    // background-color: #fff;

    .main-conGeci-img {
      width: 50px;
      height: 50px;
      &:hover {
        transform: scale(1.2);
      }
    }
  }
}
</style>
